<!--  -->
<template>
  <van-field
    :modelValue="modelValue"
    :name="name"
    :label="label"
    :placeholder="placeholder"
    :required="required"
    :rules="rules"
    :clearable="clearable"
    :readonly="readonly"
    :disabled="disabled"
    @input="handleInput"
  />
</template>

<script lang="ts" setup>
import { FieldRule, Field as VanField } from 'vant'
import { PropType, ref, watch } from 'vue'

const props = defineProps({
  name: String, // 名称，作为提交表单时的标识符
  label: String,
  modelValue: String || Number, // 值
  placeholder: String, // 输入框占位提示文字
  rules: Array as PropType<FieldRule[]>, // 表单校验规则
  required: Boolean, // 是否必填
  disabled: Boolean,
  clearable: Boolean,
  readonly: Boolean,
})
const emits = defineEmits(['update:modelValue'])

// 处理输入框的值变化
const handleInput = (value) => {
  // 更新本地状态
  // 触发 update:modelValue 事件，通知父组件值已改变
  console.log(5555, value)
  emits('update:modelValue', value.target.value)
}
</script>

<style></style>
